<template>
    <div class="poker-strategy-nav">
        <el-menu :default-active="defaultActive" @select="handleSelect">
            <el-submenu
                v-for="(actionStrategy, actionKey) in pokerMap"
                :key="actionKey"
                :index="actionKey"
            >
                <template slot="title">
                    <div class="sub-menu-item">
                        <i class="el-icon-document"></i>
                        <span :title="actionKey">{{ actionKey }}</span>
                    </div>
                </template>
                <el-menu-item
                    v-for="(strategy, strategyKey) in actionStrategy"
                    :key="`${actionKey}-${strategyKey}`"
                    :index="`${actionKey}-${strategyKey}`"
                >
                    <div class="menu-item" :title="strategyKey">
                        {{ strategyKey }}
                    </div>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import pokerMap from "@/utils/poker/poker-strategy.js";
export default {
    name: "PokerStrategyNav",
    data() {
        return {
            pokerMap: pokerMap,
            defaultActive: "",
        };
    },
    created() {
        for (let actionKey in this.pokerMap) {
            for (let strategyKey in this.pokerMap[actionKey]) {
                this.defaultActive = `${actionKey}-${strategyKey}`;
                break;
            }
            break;
        }
        this.$emit("menuChange", this.defaultActive);
    },
    methods: {
        handleSelect(index) {
            this.$emit("menuChange", index);
        },
    },
};
</script>

<style lang="scss">
.poker-strategy-nav {
    height: 100%;
    width: 200px;
    .el-menu {
        height: 100%;

        .menu-item {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sub-menu-item {
            display: flex;
            overflow: hidden;
            align-items: center;
            padding-right: 10px;

            span {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
